<template>
  <div class="waybill-detail">
    <el-collapse value="1">
      <el-collapse-item title="基本信息" name="1">
        <el-row>
          <el-col :span="6">运单任务编号：<span>{{ taskDetail.id }}</span></el-col>
          <el-col :span="6">车牌号码：<span v-if="taskDetail.truck">{{ taskDetail.truck.licensePlate }}</span></el-col>
          <el-col :span="6">调度机构：<span v-if="taskDetail.startAgency">{{ taskDetail.startAgency.name }}</span></el-col>
          <el-col :span="6">起始地：<span v-if="taskDetail.startAgency">{{ taskDetail.startAgency.name }}</span></el-col>
          <el-col :span="6">目的地：<span v-if="taskDetail.endAgency">{{ taskDetail.endAgency.name }}</span></el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <el-collapse value="1">
      <el-collapse-item title="任务轨迹" name="1">
        <el-row>
          <el-col :span="6">车牌号：<span>{{ taskDetail.id }}</span></el-col>
          <el-col :span="6">司机：<span v-if="taskDetail.truck">{{ taskDetail.truck.licensePlate }}</span></el-col>
          <el-col :span="6">计划发车时间：<span>{{ taskDetail.planDepartureTime }}</span></el-col>
          <el-col :span="6">实际发车时间：<span>{{ taskDetail.actualDepartureTime }}</span></el-col>
          <el-col :span="6">计划到达时间：<span>{{ taskDetail.planArrivalTime }}</span></el-col>
          <el-col :span="6">实际到达时间：<span>{{ taskDetail.actualArrivalTime }}</span></el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <el-collapse value="1">
      <el-collapse-item title="交付照片" name="1">
        <el-row>
          <el-col :span="8">
            <span style="vertical-align: top" class="picture-text">货品照片</span>
            <el-image
              style="width: 212px; height: 159px"
              :src="taskDetail.deliverPicture"
            />
          </el-col>
          <el-col :span="16">
            <span style="vertical-align: top" class="picture-text">凭证照片</span>
            <el-image
              style="width: 212px; height: 159px"
              :src="taskDetail.cargoPickUpPicture"
            />
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <el-collapse value="1">
      <el-collapse-item title="提货照片" name="1">
        <el-row>
          <el-col :span="8">
            <span style="vertical-align: top" class="picture-text">货品照片</span>
            <el-image
              style="width: 212px; height: 159px"
              :src="taskDetail.cargoPicture"
            />
          </el-col>
          <el-col :span="16">
            <span style="vertical-align: top" class="picture-text">凭证照片</span>
            <el-image
              style="width: 212px; height: 159px"
              :src="taskDetail.cargoPickUpPicture"
            />
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>

import setMap from '@/constant/setMap'
import { getTaskDetail } from '@/api/transport'

export default {
  // filters: {
  //   showOrderStatus(val) {
  //     return setMap.orderStatus.find(item => item.id === val).label
  //   }
  // },
  data() {
    return {
      setMap,
      taskDetail: {}
      // orderInfo: {},
      // activeNames: [],
      // transportLine: {}
    }
  },
  // computed: {
  //   senderAddress() {
  //     if (!this.orderInfo.senderProvince) return
  //     return this.orderInfo.senderProvince.name + this.orderInfo.senderCity.name + this.orderInfo.senderCounty.name
  //   },
  //   receiverAddress() {
  //     if (!this.orderInfo.receiverProvince) return
  //     return this.orderInfo.receiverProvince.name + this.orderInfo.receiverCity.name + this.orderInfo.receiverCounty.name
  //   }
  // },
  created() {
    this.initTaskDetail()
  },
  methods: {
    async initTaskDetail() {
      const res = await getTaskDetail(this.$route.query.id)
      this.taskDetail = res
      // this.orderInfo = res.order
      // this.transportLine = JSON.parse(res.transportLine)
    }
  }
}
</script>

<style lang="scss" scoped>
.waybill-detail{
    .el-col-6{
      margin: 12px 0;
      font-size: 14px;
      font-weight: normal;
      color: #20232a;
      span{
        color:#818693;
        font-size: 14px;

      }
    }
  .el-card{
    margin: 12px;
    ::v-deep .el-card__body{
      padding: 20px 44px;
    }
  }
  .el-collapse{
    margin: 12px;
   ::v-deep .el-collapse-item__header{
    padding: 0 44px;
    height: 60px;
    line-height: 60px;
    border-radius: 4px 4px 0 0;
    background-color: #f8faff;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    }
    ::v-deep .el-collapse-item__content{
      padding: 24px 40px;
    }
  }
  .picture-text {
    font-size: 16px;
    margin-right: 20px;
  }
}
</style>
